<template>
    <div class="avatar-wrap" :style="avatarStyle">
        <img
            v-if="!props.isWordAvatar"
            :src="props.url"
            alt=""
            class="avatar"
        />
        <span
            v-else
            class="avatar word-avatar"
            v-text="wordAvatar"
            :style="wordAvatarStyle"
        ></span>
    </div>
</template>
<script lang="ts" setup>
import { computed, CSSProperties } from 'vue'
import { calculateDefaultNodeColors } from '@neo4j-devtools/word-color'
import defaultAvatar from '@/assets/images/default-avatar.png'

type PropsType = {
    url?: string // 头像url
    isWordAvatar?: boolean // 文字头像
    word?: string // 文字头像加载的文字
    isRound?: boolean // 圆形头像
    size?: number // 大小
}

const props = withDefaults(defineProps<PropsType>(), {
    url: defaultAvatar, //默认头像
    isWordAvatar: false,
    word: '',
    isRound: true,
    size: 36,
})

// 文字头像取首字
const wordAvatar = computed(() => {
    return props.word.charAt(0)
})

// 圆角
const avatarStyle: CSSProperties = {
    borderRadius: props.isRound ? '100%' : '0%',
    width: `${props.size}px`,
    height: `${props.size}px`,
}

// 文字头像色值
const wordAvatarStyle = computed<CSSProperties>(() => {
    const rgb = calculateDefaultNodeColors(props.word)
    return {
        backgroundColor: rgb.backgroundColor,
        color: rgb.textColor,
    }
})
</script>
<style lang="less" scoped>
.avatar-wrap {
    text-align: center;
    overflow: hidden;
    font: 300 normal 24px/48px sans-serif;
    font-size: 150%;
    cursor: pointer;
    .avatar {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .word-avatar {
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        background-color: rgba(140, 220, 0);
        color: rgba(255, 255, 255);
    }
}
</style>
